<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig flexC-FS-C">
		<!--vuetop-->
		<view style="position:relative;" class="banner1">
			<swiper :current="swiperCurrent1" autoplay="true" @change="swiperChange1" style="height:360rpx;">
				<swiper-item class="u-swiper-item" v-for="(item, index1) in label1List" :key="index1">
					<view class="swiper-item u-list-image-wrap">
						<image class="u-swiper-image" :src="item.image"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="u-swiper-indicator flex justify-center"
				:style="{width:  '100%',bottom:  '0px',padding: '24rpx'}">
				<block>
					<view class="u-indicator-item-round"
						:class="{ 'u-indicator-item-round-active': index == swiperCurrent1 }"
						v-for="(item, index) in label1List" :key="index"></view>
				</block>
			</view>
		</view>
		<view class="gongge2 response">
			<uni-row class="demo-uni-row">
				<uni-col :span="6" v-for="(item, index) in label2List" :key="index">
					<view class="flexC-FS-C">
						<view>
							<image :src="item.pic" mode="heightFix" style="width: auto;height:70rpx;line-height:0rpx">
							</image>
						</view>
						<text style="margin-top:4rpx;">{{item.name}}</text>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view class="notice3">
			<uni-notice-bar color="#E62227" show-icon scrollable :speed="30" text="万城刚刚下单" />
		</view>
		
		<text class="title text-bold">桶装水（需压桶）</text>
		<view class="width100">
			<uni-row :gutter="20">
				<uni-col :span="12" v-for="(item, index) in tongzhuangList" :key="index">
					<view class="product flexC-FS-FS">
						<view class="product-img">
							<image :src="item.moteimgUrl" alt="" fit="cover" />
						</view>
						<p class="product-name">{{ item.name }}</p>
						<p class="product-detail">{{ item.desc }}</p>
						<p class="product-money"><span>￥{{ item.money2 }}</span><span>￥{{ item.money }}</span></p>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<text class="title text-bold">一次性饮用水</text>
		<view class="width100">
			<uni-row :gutter="20">
				<uni-col :span="12" v-for="(item, index) in tongzhuangList" :key="index">
					<view class="product flexC-FS-FS">
						<view class="product-img">
							<image :src="item.moteimgUrl" alt="" />
						</view>
						<p class="product-name">{{ item.name }}</p>
						<p class="product-detail">{{ item.desc }}</p>
						<p class="product-money"><span>￥{{ item.money2 }}</span><span>￥{{ item.money }}</span></p>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<text class="title text-bold">其他</text>
		<view class="width100">
			<uni-row :gutter="20">
				<uni-col :span="12" v-for="(item, index) in qitaList" :key="index">
					<view class="product flexC-FS-FS">
						<view class="product-img">
							<image :src="item.moteimgUrl" alt="" />
						</view>
						<p class="product-name">{{ item.name }}</p>
						<p class="product-detail">{{ item.desc }}</p>
						<p class="product-money"><span>￥{{ item.money2 }}</span><span>￥{{ item.money }}</span></p>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<tabbar />
	</view>
</template>

<script>
	import config from '@/configs/index.js'

	export default {
		data() {
			return {
				imagesWaterUrl: config.IMAGES_URL_YQGJ + 'water/',
				swiperCurrent1: 0,

				label1List: [{
					"title": "",
					"image": config.IMAGES_URL_YQGJ + 'water/banner.png',
					"pic": "https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg"
				}],

				label2List: [{
					"name": "行业资讯",
					"pic": "https://php2.diyhey.com/uploads/store/comment/20240413/3ab2bfc7c8ec9a9aff1c18d26ea9d352.png"
				}, {
					"name": "积分商城",
					"pic": "https://php2.diyhey.com/uploads/store/comment/20240413/6525707f7d94a37811acb983bd64a422.png"
				}, {
					"name": "领优惠券",
					"pic": "https://php2.diyhey.com/uploads/store/comment/20240413/f5af63f6105e5f8f04513b563d513b15.png"
				}],

				tongzhuangList: [{
					moteimgUrl: config.IMAGES_URL_YQGJ + 'water/tong1.png',
					name: "农夫山泉 桶装水",
					desc: "食品级PC加厚19L",
					money2: "15",
					money: "12"
				}, {
					moteimgUrl: config.IMAGES_URL_YQGJ + 'water/tong2.png',
					name: "哇哈哈 桶装水",
					desc: "食品级PC加厚19L",
					money2: "15",
					money: "12"
				}, {
					moteimgUrl: config.IMAGES_URL_YQGJ + 'water/tong3.png',
					name: "矿泉水",
					desc: "食品级PC加厚19L",
					money2: "15",
					money: "12"
				}],
				
				qitaList: [{
					moteimgUrl: config.IMAGES_URL_YQGJ + 'water/tong4.png',
					name: "桶装水需压桶",
					desc: "桶装水需压桶桶装水需压桶",
					money2: "15",
					money: "12"
				}]
			};
		},
		methods: {
			swiperChange1(e) {
				this.swiperCurrent1 = e.detail.current;
			},
			//获取数据

		}
	}
</script>

<style lang="scss" scoped>
	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.banner1 {
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.gongge2 {
			width: 100%;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}

		.notice3 {
			width: 100%;
			background-color: rgba(255, 255, 255, 1);
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
		}

		.title {
			font-size: 38rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.product {
			width: 100%;
			margin-bottom: 40px;
			cursor: pointer;

			.product-img {
				width: 100%;
				border-radius: 6px;
				overflow: hidden;

				image {
					width: 100%;
					height: 370rpx;
				}
			}

			.product-name {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin: 10px 0;
			}

			.product-detail {
				font-size: 14px;
				font-weight: 300;
				color: #333;
				margin-bottom: 12px;
			}

			.product-money {
				span:first-child {
					font-size: 14px;
					font-weight: 300;
					color: #969494;
					margin-right: 6px;
					text-decoration: line-through;
				}

				span:last-child {
					font-size: 14px;
					font-family: PingFangSC-Light, "PingFang SC";
					font-weight: 300;
					color: #ff0707;
				}
			}

			.product-colors {
				span {
					width: 21px;
					height: 21px;
					border: 1px solid #e3e3e3;
					margin-right: 8px;
					border-radius: 50%;
				}

				span:last-child {
					margin-right: 0;
				}

				p {
					font-size: 16px;
					color: #666;
				}
			}
		}
	}

	/**pagedomcss**/


	/* 常用轮播图 css*/
	.u-swiper-image {
		width: 100%;
		will-change: transform;
		height: 100%;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		/* #ifdef H5 */
		pointer-events: none;
		/* #endif */
	}

	.u-swiper-indicator {
		padding: 0 24rpx;
		position: absolute;
		z-index: 1;
	}

	.u-indicator-item-rect {
		width: 26rpx;
		height: 8rpx;
		margin: 0 6rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-rect-active {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-dot {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-dot-active {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-round {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-round-active {
		width: 34rpx;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.u-indicator-item-number {
		padding: 6rpx 16rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.u-list-scale {
		transform-origin: center center;
	}

	.u-list-image-wrap {
		width: 100%;
		height: 100%;
		flex: 1;
		transition: all 0.5s;
		overflow: hidden;
		box-sizing: content-box;
		position: relative;
	}

	.u-swiper-title {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.3);
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		padding: 12rpx 24rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.u-swiper-item {
		overflow: hidden;
		align-items: center;
	}
</style>